<template>
  <view class="fenxiao-order-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/Images/shop/Fanhuih.png" mode="aspectFit"></image>
      </view>
      <view class="title">分销订单</view>
    </view>
    
    <!-- 订单状态标签 -->
    <view class="status-tabs">
      <view class="tab" :class="{active: activeTab === 'all'}" @click="switchTab('all')">全部</view>
      <view class="tab" :class="{active: activeTab === 'completed'}" @click="switchTab('completed')">已结算</view>
      <view class="tab" :class="{active: activeTab === 'pending'}" @click="switchTab('pending')">待结算</view>
    </view>
    
    <!-- 订单列表 -->
    <view class="order-list">
      <!-- 订单项 -->
      <view class="order-item" v-for="(item, index) in filteredOrderList" :key="index">
        <view class="order-header">
          <view class="order-number">订单号: {{ item.orderNumber }}</view>
          <view class="order-status" :class="getStatusClass(item.status)">{{ item.status }}</view>
        </view>
        
        <view class="order-content">
          <view class="product-info">
            <image class="product-image" src="/static/Images/shop/Banhu.png" mode="aspectFill"></image>
            <view class="product-details">
              <view class="product-name">{{ item.productName }}</view>
              <view class="buyer">购买人: {{ item.buyer }}</view>
              <view class="price">¥{{ item.price }}</view>
            </view>
          </view>
        </view>
        
        <view class="order-footer">
          <view class="commission-info">
            <view class="commission-item">
              <view class="commission-label">计算价: </view>
              <view class="commission-value">¥{{ item.calculatedPrice }}</view>
            </view>
            <view class="commission-item">
              <view class="commission-label">{{ item.commissionType }}: </view>
              <view class="commission-value">{{ item.commissionRate }}%</view>
            </view>
            <view class="commission-item">
              <view class="commission-label">佣金: </view>
              <view class="commission-value highlight">¥{{ item.commission }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部指示器 -->
    <view class="bottom-indicator"></view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 当前激活的标签
const activeTab = ref('all');

// 切换标签
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 获取状态样式类
const getStatusClass = (status) => {
  if (status === '已结算') return 'status-completed';
  if (status === '待结算') return 'status-pending';
  return '';
};

// 模拟订单数据
const orders = ref([
  {
    orderNumber: '2444544687514',
    status: '已结算',
    productName: '商品名称话费商品名称话费商品名称话费',
    buyer: 'XXXX',
    price: '60',
    calculatedPrice: '9.99',
    commissionType: '比率计算',
    commissionRate: '15.00',
    commission: '15.80'
  },
  {
    orderNumber: '2444544687514',
    status: '待结算',
    productName: '商品名称话费商品名称话费商品名称话费',
    buyer: 'XXXX',
    price: '60',
    calculatedPrice: '9.99',
    commissionType: '固定金额',
    commissionRate: '15.00',
    commission: '15.80'
  },
  {
    orderNumber: '2444544687514',
    status: '已结算',
    productName: '商品名称话费商品名称话费商品名称话费',
    buyer: 'XXXX',
    price: '60',
    calculatedPrice: '9.99',
    commissionType: '比率计算',
    commissionRate: '15.00',
    commission: '15.80'
  }
]);

// 根据当前标签和搜索关键词过滤订单列表
const filteredOrderList = computed(() => {
  if (activeTab.value === 'all') return orders.value;
  if (activeTab.value === 'completed') return orders.value.filter(order => order.status === '已结算');
  if (activeTab.value === 'pending') return orders.value.filter(order => order.status === '待结算');
  return orders.value;
});
</script>

<style lang="scss">
.fenxiao-order-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 44px;
  background-color: #fff;
  position: relative;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30rpx;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

/* 订单状态标签 */
.status-tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  justify-content: space-evenly;
}

.tab {
  font-size: 30rpx;
  color: #666;
  margin-right: 40rpx;
  position: relative;
  padding-bottom: 10rpx;
}

.tab.active {
  color: #222;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff4d4f;
  border-radius: 2rpx;
}

/* 订单列表 */
.order-list {
  padding: 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-number {
  font-size: 28rpx;
  color: #666;
}

.order-status {
  font-size: 28rpx;
  font-weight: 500;
}

.status-completed {
  color: #ff4d4f;
}

.status-pending {
  color: #ff9500;
}

.order-content {
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.product-info {
  display: flex;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  background-color: #f5f5f5;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buyer {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.order-footer {
  padding: 20rpx;
}

.commission-info {
  display: flex;
  justify-content: space-between;
}

.commission-item {
  display: flex;
  align-items: center;
}

.commission-label {
  font-size: 24rpx;
  color: #999;
}

.commission-value {
  font-size: 24rpx;
  color: #333;
}

.commission-value.highlight {
  color: #ff4d4f;
  font-weight: 500;
}

/* 底部指示器 */
.bottom-indicator {
  width: 120rpx;
  height: 8rpx;
  background-color: #ddd;
  border-radius: 4rpx;
  margin: 30rpx auto;
}
</style>